<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>项目</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script>
        window.$ = window.jQuery = require("jquery")
    </script>
    <script src="../node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <style type="text/css">
        .lead th a {
            color: silver;
            line-height: 60px;
        }
        .lead th img {
            width: 70px;
            height: 60px;
        }
        #web_bg {
            position:fixed;
            top: 0;
            left: 0;
            width:100%;
            height:100%;
            min-width: 1000px;
            z-index:-10;
            zoom: 1;
            background-repeat: no-repeat;
            background-size: cover;
        }
        body {
            margin: 0 10px 40px 10px;
            height: auto;
            min-width: 900px
        }
        .lead th {
            vert-align: middle;
            font-size: x-large;
            text-align: center;
        }
        #projectTab {
            margin-top: 3px;
        }
        #projectTab a {
            color: black;
        }
        #projectTabContent {
            height: auto;
            margin-bottom: 30px;
            min-height: 200px;
        }
        #Overview p {
            font-size: medium;
            letter-spacing: 2px;
        }
        .donation {
            margin-top: 20px;
        }
        .donation img{
            width: 40px;
            height: 40px;
        }
        .donation li {
            font-size: large;
            background: transparent;
        }
        .donation .m {
            float: right;
        }
        .progress {
            height: 40px;
        }
        .donate {
            width: 100%;
            height: 50px;
            background-color: orchid;
            font-size: x-large;
            margin-top: 40px;
            border-radius: 15px;
        }
        .wrapper {
            display: grid;
            grid-template-columns: 48% 4% 48%;
            margin-top: 20px;
        }
        .wrapper li {
            background: transparent;
        }
        .bt {
            margin-bottom: 40px;
        }
        .chaPic img {
            border-radius: 10%;
        }
        #donate_money {
            width: 100%;
            height: 45px;
            background: transparent;
            font-size: x-large;
            margin-top: 45px;
            border-radius: 15px;
        }
    </style>
</head>
<body id="0">
<div id="web_bg" style="background-image: url(src/assets/images/idenbackground.jpg);"></div>
<table class="table table-dark lead" style="margin-bottom: 0;">
    <thead>
    <tr>
        <th><img src="src/assets/images/sign.jpeg"></th>
        <th><a href="home.html">主界面</a> </th>
        <th ><a href="explore.html">更多项目</a> </th>
        <th ><a href="identification.html">发起募捐</a> </th>
        <th><a href="user.html"> <img src="src/open-iconic-master/svg/person.svg" alt="no image"></a></th>
    </tr>
    </thead>
</table>
<div class="container-fluid" style="margin-top: 9px;">
    <div class="row">
        <div class="col-lg-7">
            <img src="src/assets/images/homeP.jpg" style="width: 100%; height: 450px;">
            <ul id="projectTab" class="nav nav-justified nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#Overview">详细信息</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#inquire">基金流查询</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#donater">捐献者</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#charity">机构速览</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#relative">相关项目</a>
                </li>
            </ul>
            <div id="projectTabContent" class="tab-content" >
                <div class="tab-pane active" id="Overview">
                    <p>
                        <br>解决贵州生活在10.91万平方公里喀斯特面积上，饱受SO4、矿化度、硬度以及工业化污染的山区学校师生的饮水问题。
                        市场给予直饮水一个亲切的称谓，即“健康水”，可想而知直饮水在消费者心中的位置。供水终端直接进行净化、活化、能量化
                        ，模拟大自然水的净化体系进行处理，直接输出符合国家标准的饮用水，这样的水就叫直饮水。在贵州山区民众饮用的水一般
                        分为井水、水塘水、山溪水、河水（河流水）， 所谓的“自来水”就是通过管道引到每家每户，人们再也不用肩挑背扛的水，这
                        些水是否达到国家规定的饮用水标准，从没人关注过。在这些所谓的“自来水”末端安装直饮水机，使山区学校师生喝上符合国家饮用水标准
                        的水，对确保山区学校饮水安全，保证小朋友健康茁壮成长均有着重要的意义。
                    </p>
                </div>
                <div class="tab-pane" id="inquire">
                    <div class="wrapper">
                        <ul class="list-group" id="flow">
                        </ul>
                        <div style="text-align: center">
                            <img src="src/open-iconic-master/svg/arrow-right.svg" alt="image missing">
                        </div>
                        <ul class="list-group">
                            <li class="list-group-item">3CKzLPRXEctJLdkWo3R38ggnmAqFwCVk91</li>
                        </ul>
                    </div>
                </div>
                <div class="tab-pane" id="donater">
                    <ul class="list-group donation" id="work_people">
                    </ul>
                </div>
                <div class="tab-pane " id="charity">
                </div>
                <div class="tab-pane " id="relative">
                </div>
            </div>
        </div>
        <div class="col-lg-5">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <p style="color: orange; font-size: large">募捐情况</p>
                        <hr style="color: lightgrey; margin-top: 0">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-sm-6 col-xs-6">
                        <h5>已募集金额</h5>
                        <h3 style="color: green" >￥<span id="donate_yet">300</span></h3>
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-6">
                        <h5>目标金额</h5>
                        <h3 style="color: black" >￥<span id="donate_goal">40000</span> </h3>
                    </div>
                </div>
                <div class="row" style="margin-top: 15px">
                    <div class="col-md-12">
                        <h5>贡献人数</h5>
                        <h5><img src="src/open-iconic-master/svg/people.svg" style="width: 20px; height: 20px" >&nbsp;&nbsp;<span id="donate_num">2</span></h5>
                    </div>
                </div>
                <div class="row" style="margin-top: 20px">
                    <div class="col-md-12">
                        <div class="progress">
                            <div class="progress-bar" id="bar" role="progressbar" aria-valuenow="60"
                                 aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                <span style="line-height: 40px;" id="bar_process">60 % 完成</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-7">
                        <input type="text" class="donate_money" id="donate_money" placeholder="请输入捐款金额">
                    </div>
                    <div class="col-md-5" style="text-align: center">
                        <label style="margin-top: 50px">
                            <input type="checkbox" value="" id="checkName"><span style="font-size: large">&nbsp;&nbsp;是否匿名</span>
                        </label>
                    </div>
                </div>
                <div class="row bt">
                    <div class="col-md-12">
                        <button type="submit" name="donate" class="donate" id="donate">立即捐款</button>
                    </div>
                </div>
                <div class="row chaPic">
                    <img src="src/assets/images/ac1.jpeg" alt="image missing">
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../node_modules/axios/dist/axios.min.js"></script>
<script src="../charityJs/project.js"></script>
</body>
</html>